<template>
  <div class="test-echarts">
    <RevEcharts :config="echartConfig1" />
    <RevEcharts :config="echartConfig2" />
  </div>
</template>
<script setup>
import { ref } from 'vue'

const echartConfig1 = ref({})
const echartConfig2 = ref({})
echartConfig1.value = {
  title: '折线图',
  meta: {
    fields: [
      {
        key: 'id',
        name: '用户id',
        type: 'int',
        editable: false,
        require: false,
        display: true
      },
      {
        key: 'name',
        name: '用户名',
        type: 'string',
        editable: true,
        require: true,
        display: true
      },
      {
        key: 'status',
        name: '状态',
        type: 'enum',
        values: ['正常', '异常'],
        default: '正常',
        editable: false,
        require: false,
        display: true
      }
    ],
    source: 'table/User.yaml',
    echarts: {
      type: 'line',
      options: {
        xAxis: [
          {
            dataField: 'name'
          }
        ],
        series: [
          {
            type: 'bar',
            dataField: 'id'
          },
          {
            type: 'line',
            dataField: 'status'
          }
        ]
      }
    }
  }
}
echartConfig2.value = {
  title: '饼图',
  meta: {
    fields: [
      {
        key: 'id',
        name: '用户id',
        type: 'int',
        editable: false,
        require: false,
        display: true
      },
      {
        key: 'name',
        name: '用户名',
        type: 'string',
        editable: true,
        require: true,
        display: true
      },
      {
        key: 'status',
        name: '状态',
        type: 'enum',
        values: ['正常', '异常'],
        default: '正常',
        editable: false,
        require: false,
        display: true
      }
    ],
    source: 'table/User.yaml',
    echarts: {
      type: 'pie',
      options: {
        series: [
          {
            name: '测试',
            labelField: 'name',
            valueField: 'id'
          }
        ]
      }
    }
  }
}
</script>
<style lang="less">
.test-editor {
  .editor-c {
    height: 600px;
  }
}
</style>
